<template>
    <el-menu 
        class="header-nav"
        background-color="#2f3447"
        active-text-color="#fff"
        text-color="#fff"
        mode="horizontal"
    >
        <span class="header-nav-title">
            智能学习系统
        </span>

        <el-submenu index="10" style="float:right">

            <template slot="title">
                <i class="el-icon-s-custom"></i>
                admin
            </template>

            <el-menu-item index="10-1">
                <i class="el-icon-s-home"></i>
                个人中心
            </el-menu-item>
            <el-menu-item index="10-2">
                <i class="el-icon-s-comment"></i>
                我的消息
            </el-menu-item>
            <el-menu-item index="10-3">
                <i class="el-icon-male"></i>
                登出
            </el-menu-item>

        </el-submenu>

    </el-menu>
</template>

<script>
export default {
    name:"HeaderNav"
}
</script>

<style scoped>
.header-nav-title{
    padding-left: 10px;
    font-size:18px;
    font-weight: 600;
    color: white;
}
.header-nav{
    height: 60px;
    line-height: 60px;
}
</style>